<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>
    
    ES6 Class继承、原型与原型链 - DSRBLOG
    
  </title>
  

  
  
  <link href="atom.xml" rel="alternate" title="DSRBLOG" type="application/atom+xml">
  <link rel="stylesheet" href="asset/css/style.min.css">
  <link rel="stylesheet" href="asset/css/doc.css">
  <script src="asset/app.js"></script>


</head>

<body> <section class="ct-body">
	<div class="container">
		<div class="columns is-variable bd-klmn-columns is-4 is-centered">
			<div class="column is-four-fifths">
				<div class="post-body single-content">
					
					<h1 class="title">
						ES6 Class继承、原型与原型链
					</h1>


					<div class="media">
						
						
						<div class="media-content">
							<div class="content">
								<p>
									<span class="date">2022/08/20 19:34 下午</span>
									

									

									<br />
									<span class="tran-tags">Tags:</span>&nbsp;
									
									<a class="tag is-link is-light">#ES6新特性</a>
									

								</p>
							</div>
						</div>

					</div>
				</div>
				<article class="markdown-body single-content">
					<h2><a id="class%E7%BB%A7%E6%89%BF" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>Class继承</h2>
<h3><a id="%E5%AE%9A%E4%B9%89class%E7%B1%BB" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>定义class类</h3>
<p>通过<code>class</code>关键字定义一个类的模板，没有在内存中实际产生一个类的实例对象，也没有分配内存空间</p>
<pre class="line-numbers"><code class="language-js">//创建Class类
class Person {
//构造函数
    constructor(name) {
        this.name = name;
    }
}

//使用extends继承class类
class Student extends Person{
    constructor(name, score) {
        super(name); //执行继承的class类的构造函数
        this.score = score;
    }
    
    introduce() {
        console.log(`我是``{this.name}，考了``{this.score}分`);
    }
}
</code></pre>
<ul>
<li><strong>constructor：</strong><code>constructor</code>属性用于返回创建该对象的函数，也就是我们常说的<strong>构造函数</strong>，其余每个具有原型的对象都会自动获得该属性，除了<code>arguments</code>、<code>Enumerator</code>、<code>Error</code>、<code>Global</code>、<code>Math</code>、<code>RegExp</code>、<code>Regular Expression</code>等一些特殊对象</li>
</ul>
<h3><a id="%E9%80%9A%E8%BF%87class%E7%B1%BB%E5%AE%9E%E4%BE%8B%E5%8C%96%E5%AF%B9%E8%B1%A1" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>通过class类实例化对象</h3>
<pre class="line-numbers"><code class="language-js">const student = new Student('张三', 99);
student.introduce();
</code></pre>
<h2><a id="%E5%8E%9F%E5%9E%8B" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>原型</h2>
<h3><a id="%E9%9A%90%E5%BC%8F%E5%8E%9F%E5%9E%8B" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>隐式原型</h3>
<p>JavaScript中，每个对象都必须具有<code>__proto__</code>属性，称为“<strong>隐式原型</strong>”，指向构造该对象的构造函数的原型</p>
<h3><a id="%E5%8E%9F%E5%9E%8B%E5%B1%9E%E6%80%A7" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>原型属性</h3>
<p>如果对象是<code>Function</code>所创建的对象，除了具有<code>__proto__</code>属性外，还具有<code>prototype</code>属性，称为“<strong>原型属性</strong>”</p>
<h3><a id="hasownproperty" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>hasOwnProperty()</h3>
<p>用于检测某个属性是否是对象的自有属性</p>

				</article>
				<div class="comments-wrap">
					<div class="share-comments">
						

						

						
					</div>
				</div><!-- end comments wrap -->
			</div>
		</div><!-- end columns -->
	</div><!-- end container -->
</section>  
<script type="text/javascript"
	src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">MathJax.Hub.Config({TeX: { equationNumbers: { autoNumber: "AMS" } }});</script>















<script src="asset/prism.js"></script>









</body>

</html>